<template>
    <ul class="todo-main">
        <!-- <TodoItem
            v-for="(todoObj) in todoArr"
            :key="todoObj.id"
            :todos="todoObj"
            :checkTodo="checkTodo"
            :deleteTodo="deleteTodo"
        /> -->
        <transition-group
            appear
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInRight"
            leave-active-class="animate__fadeOutRight"
        >
            <TodoItem
                v-for="(todoObj) in todoArr"
                :key="todoObj.id"
                :todos="todoObj"
            />
        </transition-group>
    </ul>
</template>

<script>
import 'animate.css'
import TodoItem from './TodoItem'

export default {
  name: 'TodoList',
  components: {TodoItem},
  //   props: ['todoArr', 'checkTodo', 'deleteTodo']
  props: ['todoArr']
}
</script>

<style scoped>
/*main*/
.todo-main {
    margin-left: 0px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0px;
}

.todo-empty {
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding-left: 5px;
    margin-top: 10px;
}
</style>
